<h2>{{ 'POLICY.LOGIN_TEXTS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.LOGIN_TEXTS.DESCRIPTION' | translate }}</p>
<cnsl-info-section class="locked" *ngIf="langSvc.isNotAllowed(language) | async" [type]="InfoSectionType.WARN">
  {{ 'POLICY.LOGIN_TEXTS.ACTIVE_LANGUAGE_NOT_ALLOWED' | translate }}</cnsl-info-section
>

<div *ngIf="loading" class="spinner-wr">
  <mat-spinner diameter="30" color="primary"></mat-spinner>
</div>

<div class="date">
  <div>
    <p class="newer-title" *ngIf="newerVersionExists">{{ 'POLICY.LOGIN_TEXTS.NEWERVERSIONEXISTS' | translate }}</p>
    <p *ngIf="newerPolicyChangeDate && newerVersionExists">
      {{ 'POLICY.LOGIN_TEXTS.CHANGEDATE' | translate }}:
      {{ newerPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm:ss' }}
    </p>
    <p class="cnsl-secondary-text" *ngIf="currentPolicyChangeDate">
      {{ 'POLICY.LOGIN_TEXTS.CURRENTDATE' | translate }}:
      {{ currentPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm:ss' }}
    </p>
  </div>
  <button [disabled]="!newerVersionExists" color="primary" mat-raised-button (click)="loadData()">
    <div class="cnsl-action-button">
      <i class="las la-sync-alt"></i>
      <span>{{ 'ACTIONS.REFRESH' | translate }}</span>
    </div>
  </button>
</div>
<form *ngIf="allowed$ | async" class="top-actions" [formGroup]="form">
  <cnsl-form-field class="keys">
    <cnsl-label>{{ 'POLICY.LOGIN_TEXTS.KEYNAME' | translate }}</cnsl-label>
    <mat-select formControlName="currentSubMap" name="currentSubMap">
      <mat-option *ngFor="let key of KeyNamesArray" [value]="key">
        {{ 'POLICY.LOGIN_TEXTS.KEYS.' + key | translate }}
      </mat-option>
    </mat-select>
  </cnsl-form-field>

  <cnsl-form-field class="language">
    <cnsl-label>{{ 'POLICY.LOGIN_TEXTS.LANGUAGE' | translate }}</cnsl-label>
    <mat-select formControlName="language" name="language">
      <mat-option *ngFor="let lang of allowed$ | async" [value]="lang">
        <div class="centerline">
          <span
            >{{ lang }}
            <span class="lighter cnsl-secondary-text"
              >|&nbsp;{{ 'POLICY.LOGIN_TEXTS.LANGUAGES.' + lang | translate }}</span
            ></span
          >
        </div>
      </mat-option>
      <mat-optgroup [label]="'POLICY.LOGIN_TEXTS.LANGUAGES_NOT_ALLOWED' | translate" *ngIf="langSvc.restricted$ | async">
        <mat-option *ngFor="let lang of langSvc.notAllowed$ | async" [value]="lang">
          <div class="centerline">
            <span
              >{{ lang }}
              <span class="lighter cnsl-secondary-text"
                >|&nbsp;{{ 'POLICY.LOGIN_TEXTS.LANGUAGES.' + lang | translate }}</span
              ></span
            >
          </div>
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </cnsl-form-field>
</form>

<div class="divider"></div>

<div class="content">
  <cnsl-edit-text
    label="one"
    [disabled]="(canWrite$ | async) === false"
    [default$]="getDefaultInitMessageTextMap$"
    [current$]="getCustomInitMessageTextMap$"
    (changedValues)="updateCurrentValues($event)"
  ></cnsl-edit-text>
</div>

<div class="actions">
  <button
    class="reset-button"
    [disabled]="(canWrite$ | async) === false || isDefault"
    (click)="resetDefault()"
    color="warn"
    type="submit"
    mat-stroked-button
  >
    <div class="cnsl-action-button">
      <i class="las la-history"></i>
      <span>{{ 'ACTIONS.RESETDEFAULT' | translate }}</span>
    </div>
  </button>
  <button
    class="save-button"
    [disabled]="(canWrite$ | async) === false"
    (click)="saveCurrentTexts()"
    color="primary"
    type="submit"
    mat-raised-button
  >
    {{ 'ACTIONS.SAVE' | translate }}
  </button>
</div>
